<template>
	<scroll-view scroll-y="true" class="content">
		<view class="header">
			<view class="bg">
				<view class="float" @click="goTo('order')">
					<text>参观预约</text>
					<image src="../../static/reservation_icon_triangle@2x.png"></image>
				</view>
			</view>
			<image class="head" src="../../static/reservation_banner01@2x.png" mode="aspectFill"></image>
		</view>
		<view class="header">
			<view class="bg">
				<view class="float" @click="goTo('show',2)">
					<text>特展预约</text>
					<image src="../../static/reservation_icon_triangle@2x.png"></image>
				</view>
			</view>
			<image class="head" src="../../static/reservation_banner02@2x.png" mode="aspectFill"></image>
		</view>
		<view class="header">
			<view class="bg">
				<view class="float" @click="goTo('activity',0)">
					<text>社教活动预约</text>
					<image src="../../static/reservation_icon_triangle@2x.png"></image>
				</view>
			</view>
			<image class="head" src="../../static/reservation_banner03@2x.png" mode="aspectFill"></image>
		</view>
		<view class="header">
			<view class="bg">
				<view class="float" @click="goTo('activity',1)">
					<text>讲座预约</text>
					<image src="../../static/reservation_icon_triangle@2x.png"></image>
				</view>
			</view>
			<image class="head" src="../../static/reservation_banner04@2x.png" mode="aspectFill"></image>
		</view>
		<!-- <secTitle class="secTitle" :code="2" title="特展预约" color="#B9AC90" :showMore="true" type="show"
			@goTo="goTo(arguments)">
		</secTitle>
		<scroll-view scroll-x="true" class="row">
			<toOrderItem style="margin-right: 20rpx;" class="row-item" type="showInfo" :id="0"
				img="../../static/exhibition_img20@2x.png" title="别有洞天" dateTimeStr="2021年8月21日" location="盐城市博物馆"
				@goTo="goTo(arguments)"></toOrderItem>
		</scroll-view>
		<secTitle class="secTitle" title="社教活动预约" color="#B9AC90" :showMore="true" type="activity"
			@goTo="goTo(arguments)">
		</secTitle>
		<scroll-view scroll-x="true" class="row">
			<toOrderItem class="row-item" type="activityInfo" :id="1" img="../../static/石墨镌华——铜镜拓印体验   16 9.jpg"
				title="石墨镌华——铜镜拓印体验" dateTimeStr="2021年8月21日" location="盐城市博物馆" @goTo="goTo(arguments)"></toOrderItem>
			<toOrderItem class="row-item" :id="2" img="../../static/熏香染袂   16 9.jpg" title="熏香染袂—香纂、香丸制作"
				dateTimeStr="2021年8月21日" type="activityInfo" location="盐城市博物馆" @goTo="goTo(arguments)"></toOrderItem>
			<toOrderItem class="row-item" :id="3" img="../../static/操缦遗音—古琴展演及体验   16 9.jpg" title="操缦遗音—古琴展演及体验"
				dateTimeStr="2021年8月21日" type="activityInfo" location="盐城市博物馆" @goTo="goTo(arguments)"></toOrderItem>
			<toOrderItem class="row-item" :id="4" img="../../static/青瓯瀹茗—宋式点茶、斗茶     16 9.jpg" title="青瓯瀹茗——宋式点茶、斗茶"
				dateTimeStr="2021年8月21日" type="activityInfo" location="盐城市博物馆" @goTo="goTo(arguments)"></toOrderItem>
			<toOrderItem style="margin-right: 20rpx;" class="row-item" :id="5" img="../../static/子慕予裳   16 9.jpg"
				title="子慕予裳——汉服体验" dateTimeStr="2021年8月21日" type="activityInfo" location="盐城市博物馆"
				@goTo="goTo(arguments)"></toOrderItem>
			<toOrderItem style="margin-right: 20rpx;" class="row-item" :id="6"
				img="../../static/美人云鬓——花簪制作     16 9.jpg" title="美人云鬓——花簪制作" dateTimeStr="2021年8月21日"
				type="activityInfo" location="盐城市博物馆" @goTo="goTo(arguments)"></toOrderItem>
		</scroll-view>
		<secTitle class="secTitle" title="讲座预约" color="#B9AC90" :showMore="true" type="activity" @goTo="goTo(arguments)"
			:code="1">
		</secTitle>
		<scroll-view scroll-x="true" class="row" style="margin-bottom: 20rpx;">
			<toOrderItem style="margin-right: 20rpx;" class="row-item" :id="6"
				img="../../static/美人云鬓——花簪制作     16 9.jpg" title="美人云鬓——花簪制作" dateTimeStr="2021年8月21日"
				type="activityInfo" location="盐城市博物馆" @goTo="goTo(arguments)"></toOrderItem>
		</scroll-view> -->
	</scroll-view>
</template>

<script>
	import {
		getUrlParam,
		getCode
	} from '../../js_sdk/utils.js'
	import {
		orderPage,
		doGet
	} from '../../js_sdk/request-helper.js'
	import secTitle from '../customer/secTitle.vue'
	import toOrderItem from '../customer/toOrderItem.vue'
	export default {
		components: {
			secTitle,
			toOrderItem,
		},
		data() {
			return {

			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('userInfo')) {
				let museumId = getUrlParam('museumId')
				let code = getCode(orderPage, museumId)
				if (code) {
					if (!uni.getStorageSync('museumId')) {
						uni.setStorageSync('museumId', getUrlParam('state'))
					}
					this.wxLogin(code)
				}
			}
		},
		onShow() {
			if (uni.getStorageSync('toMineOrderList')) {
				uni.setStorageSync('toMineOrderList', false)
				uni.navigateTo({
					url: '../mine/myOrderList?index=' + uni.getStorageSync('toMineOrderList')
				})
			}
		},
		methods: {
			wxLogin(code) {
				doGet('/blade-museum/user/wxLogin?code=' + code +
					'&museumId=' + uni.getStorageSync('museumId'), (res) => {
						uni.setStorageSync('userInfo', res)
					}, (err) => {
						uni.showToast({
							icon: 'error',
							title: err
						})
					})
			},
			goTo(e, index) {
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: '../index/index'
					})
					return
				}
				if (typeof e == 'object') {
					if (e[0] == 'activity') {
						if (e[1]) {
							uni.navigateTo({
								url: "../activity/activityList?index=" + e[1]
							})
						} else {
							uni.navigateTo({
								url: "../activity/activityList"
							})
						}
					} else if (e[0] == 'activityInfo') {
						uni.navigateTo({
							url: "../activity/activityInfomation?id=" + e[1]
						})
					} else if (e[0] == 'show') {
						if (e[1]) {
							uni.navigateTo({
								url: "../show/showList?index=" + e[1]
							})
						} else {
							uni.navigateTo({
								url: "../show/showList"
							})
						}
					} else if (e[0] == 'showInfo') {
						uni.navigateTo({
							url: "../show/showInfo?id=" + e[1]
						})
					}
				} else {
					if (e == 'show') {
						uni.navigateTo({
							url: "../show/showList?index=" + index
						})
					} else if (e == 'activity') {
						uni.navigateTo({
							url: "../activity/activityList?index=" + index
						})
					} else if (e == 'order') {
						uni.navigateTo({
							url: "../order/order"
						})
					}
				}
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #eee;
	}

	.header {
		width: 100%;
		height: 400rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.header .bg {
		z-index: 10;
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header .head {
		width: 100%;
		height: 400rpx;
	}

	.float {
		height: 60rpx;
		width: auto;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 40rpx;
		padding: 0 30rpx;
		border: 4rpx solid #fff;
	}

	.float text {
		color: #fff;
		font-size: 32rpx;
		line-height: 32rpx;
	}

	.float image {
		height: 30rpx;
		width: 30rpx;
	}

	.secTitle {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		margin: 40rpx 0 20rpx 0;
	}

	.row {
		/* background: #fff; */
		/* height: 320rpx; */
		white-space: nowrap;
		width: calc(100% - 20rpx);
		height: auto;
		display: flex;
		margin-left: 20rpx;
	}

	/* .row::-webkit-scrollbar {
		display: none;
	} */

	.row-item {
		display: inline-block;
		/* height: 400rpx; */
		/* width: 500rpx; */
	}
</style>
